<template>
    <div :class="['CommonTab', 'type-' + type]">
        <p
            v-for="tab in tabs"
            :key="tab.value"
            :class="[
                'tab',
                { active: value == tab.value },
                tab.tabTypeOption || '',
            ]"
            @click="$emit('input', tab.value)"
            v-text="tab.label"
        ></p>
        <button v-if="type == 'C'" class="more" @click="more_show = true">
            ●●●<cite v-if="more_show">
                <ul>
                    <li>Production completed(1)</li>
                    <li>Cancelled(2)</li>
                    <li>Refunded(4)</li>
                </ul></cite
            >
        </button>
    </div>
</template>
<script>
export default {
    name: "CommonTab",
    props: {
        type: {
            type: String,
            default: "C",
        },
        value: {},
        tabs: {
            type: Array,
            default: () => {
                return [];
            },
        },
        option: {
            type: Object,
            default: () => {
                return {
                    label: "label",
                    value: "value",
                };
            },
        },
        tabWidth: {
            type: String,
            default: "",
        },
        tabTypeOption: {
            type: String,
            default: "tabType",
        },
        length: {
            type: Number,
            default: 5,
        },
    },
    data() {
        return {
            more_show: false,
        };
    },
    methods: {},
};
</script>
<style lang="scss" scoped>
.CommonTab {
    display: flex;
    flex-direction: row;
    align-items: center;
    &.type-A {
        .tab:first-child.tab:last-child {
            border-radius: 6px;
        }
        p {
            cursor: pointer;
            margin-right: -1px;
            &:first-child {
                border-radius: 6px 0 0 6px;
            }
            &:last-child {
                border-radius: 0 6px 6px 0;
            }
            width: 160px;
            height: 32px;
            background: #ffffff;
            border: 1px solid #c6c6c6;
            font-size: 14px;

            font-weight: 600;
            color: #555555;
            line-height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            &:hover,
            &.active {
                color: #d5417a;
                background: #fafafa;
            }
        }
    }
    &.type-B {
        .tab {
            box-sizing: border-box;
            cursor: pointer;
            padding: 0 14px 12px;
            font-size: 14px;

            font-weight: 600;
            color: #555555;
            line-height: 16px;
            border-bottom: 1px solid #dcdcdc;
            &:hover,
            &.active {
                color: #d5417a;
            }
            &.active {
                border-bottom: 3px solid #ea4c89;
            }
        }
    }
    &.type-C {
        box-sizing: border-box;
        .tab {
            position: relative;
            &.error::before {
                content: "";
                display: block;
                position: absolute;
                right: 4px;
                top: 4px;
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: #f65e53;
            }
            &.success::before {
                content: "";
                display: block;
                position: absolute;
                right: 4px;
                top: 4px;
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: #f65e53;
            }
            &.warning::before {
                content: "";
                display: block;
                position: absolute;
                right: 4px;
                top: 4px;
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: #f65e53;
            }
            cursor: pointer;
            padding: 0 12px;
            margin-right: 8px;
            height: 36px;
            border-radius: 4px;
            font-size: 16px;

            font-weight: 600;
            color: #555555;
            line-height: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
            &:hover,
            &.active {
                color: #d5417a;
            }
            &.active {
                background: #f0f0f0;
                border-radius: 4px;
            }
        }
        .more {
            position: relative;
            margin-left: 16px;
            width: 32px;
            height: 32px;
            font-size: 8px;
            border-radius: 4px;
            background: #f0f0f0;
            color: #555555;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            &:hover {
                color: #ea4c89;
            }
            cite {
                position: absolute;
                top: calc(100% + 2px);

                padding: 10px 0;
                width: 216px;
                color: #555555;
                border: 1px solid #d9d9d9;
                background: #ffffff;
                box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.12);
                border-radius: 6px;
                ul li {
                    display: flex;
                    align-items: center;
                    height: 36px;
                    padding: 0 12px;
                    font-size: 14px;
                    color: #555555;
                    &:hover,
                    &.active {
                        background: #f6f6f6;
                        color: #000;
                        font-weight: 600;
                    }
                }
            }
        }
    }
}
</style>
